<template>
  <div class="info">
    <div class="tupin">
      <img :src="list.thumb_path" />
    </div>
    <div class="ziti">
      <p>{{ list.title }}</p>
      <hr />
      <span>市场价{{ lis.market_price }}</span>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <span>销售价{{ lis.sell_price }}</span>
      <div class="flep">
        <i>购买数量:</i>
        <van-stepper v-model="value" />
      </div>
      <van-button type="default" class="goumai">立即购买</van-button>
      &nbsp;
      <van-button type="default" class="defaul">加入购物车</van-button>
      <br />
    </div>
    <div>
      <h5>商品参数</h5>
      <hr />
      <p>商品货号{{ lis.goods_no }}</p>
      <p>库存情况{{ lis.stock_quantity }}</p>
      <p>上架时间{{ lis.add_time }}</p>
    </div>
    <div class="anning">
      <van-button
        type="default"
        class="goumai"
        @click="$router.push(`/xinwen/${lis.id}`)"
        >商品介绍</van-button
      >
      &nbsp;
      <van-button
        type="default"
        class="defaul"
        @click="$router.push(`/newsDetial/${lis.id}`)"
        >商品评论</van-button
      >
    </div>
  </div>
</template>

<script>
import { getshopcarlist, getinfo } from "@/apis/category";

export default {
  data() {
    return {
      value: 1,
      ids: this.$route.params.id,
      id: this.$route.params.id,
      list: [],
      lis: [],
    };
  },

  async created() {
    const res = await getshopcarlist(this.ids);
    console.log(res, "res");
    this.list = res.data.message[0];
    // console.log(this.list);
    const res2 = await getinfo(this.id);
    console.log(res2, "res2");
    this.lis = res2.data.message[0];
    console.log(this.lis);
  },
};
</script>

<style lang="less" scoped>
.info {
  height: 750px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: auto;
  .tupin {
    display: flex;

    margin: 0 auto;
    img {
      width: 99.33333vw;
      height: 320px;
    }
  }
  .ziti {
    p {
      color: #00a0e1;
    }
    .flep {
      display: flex;
      i {
        line-height: 23px;
      }
    }
    .goumai {
      color: #fff;
      background-color: #26a2ff;
    }
    .defaul {
      color: #fff;
      background-color: #ff1313;
    }
  }
  .anning {
    .goumai {
      border: 1px solid #a6d9ff;
      background-color: #ffffff;
      color: #a6d9ff;
    }
    .defaul {
      border: 1px solid #ff1313;

      color: #ff1313;
      background-color: #ffffff;
    }
  }
}
</style>